<template>
	<view class="wrap">
		
		<scroll-view class="" style="height: 95vh;">
			<view class="list-main" v-show="order">
			    <view class="display-flex-column">
					<view class="row-center tytop">
						<view class="type-desc">
							{{order.typeDesc?order.typeDesc:""}}
						</view>
						<view class="add_time">
							下单时间：{{order.addTimeDesc}}
						</view>
						<view class="status_desc">
							{{order.statusDesc?order.statusDesc:""}}
						</view>
					</view>
					<view class="row" style="margin-bottom: 15px;">
						<view class="display-flex-column">
							<view class="row-center">
								<view class="station_dot station_dot_start">
								</view>
								<view class="od-item">
									{{order.origin}}
								</view>
							</view>
							
							<view class="shu-line" style="margin: 0 18px;">
								
							</view>
							
							<view class="row-center">
								<view class="station_dot station_dot_end">
								</view>
								<view class="od-item">
									{{order.destination}}
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="row-center" style="margin: 14px 5px;">
						<view v-if="order.type==1" class="dan">
							出发：{{order.goTimeDesc}}
						</view>
						<view v-if="order.type==2" class="dan display-flex-column">
							<text>出发：{{order.goTimeDesc}}</text>
							<text>返程：{{order.backTimeDesc}}</text>
						</view>
						<view v-if="order.type==3" class="dan">
							用车天数：{{order.days}}天
						</view>
			
					</view>
					
				</view>
			</view>
			<view class="ex-main display-flex-column ">
				<view class="row-center ex-color">
					<text>用车人数</text>
					<text style="margin-left: auto;">{{order.peopleSum}}人</text>
				</view>
				<view v-for="(item,index) in order.carTypeList" :key="index" class="row-center ex-color">
					<text>{{item.name}}</text>
					<text style="margin-left: auto;">{{item.num}}辆</text>
				</view>
				<view class="row-center ex-color">
					<text>公里数</text>
					<text style="margin-left: auto;">{{order.distance}}公里</text>
				</view>
			</view> 
			<view  class="ex-main display-flex-column ">
				<view class="row-center ex-color">
					<text>原价</text>
					<text style="margin-left: auto;text-decoration: line-through;">￥{{order.originPrice?order.originPrice:"--"}}元</text>
				</view>
				<view class="row-center ex-color">
					<text>线上折扣价</text>
					<text style="margin-left: auto;color: #ff5500;">￥{{order.price?order.price:"--"}}元</text>
				</view>
				<view class="row-center ex-color">
					<text>包车ID</text>
					<text style="margin-left: auto;color: #0055ff;" >{{order.baocheId}}<text class='copy' @click='copy(order.baocheId)'>复制</text>	
					</text>
				</view>	
				<view class="row-center ex-color">
					<text>用户手机号</text>
					<text style="margin-left: auto;color: #0055ff;" @click="callUser(order.phone)">{{order.phone?order.phone:"--"}}</text>
				</view>
				<!-- <view class="row-center ex-color">
					<text>需支付定金</text>
					<text style="margin-left: auto;">￥{{order.tprice?order.tprice:"--"}}元</text>
				</view>
				<view class="row-center ex-color">
					<text>需支付尾款</text>
					<text style="margin-left: auto;">￥{{order.wprice?order.wprice:"--"}}元</text>
				</view> -->
			</view> 
			<view style="position:fixed;bottom:0;left:0;right:0;padding:20rpx 24rpx;padding-bottom:20rpx;background-color: #fff;">
				
				<view @click="orderCancel" v-if="order.status == 0"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >取消订单</view>
				<view v-if="order.status == -1"  style="background:#9b9b9b;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >订单已取消</view>
				<view  v-if="order.status == 5" class="row-center">
					<view  class="tuikuan" @click="orderCancel" >取消订单</view>
				
					
				</view>
			
				<view  v-if="order.status == 6" class="row-center">
					<view  class="tuikuan" @click="applyRefund()" >立即退款</view>
					
					<view class="dengdaifache" @click="baocheConfirm" >确认包车完成</view>
					
				</view>
				<view  v-if="order.status == 7" class="row-center">
					<view  class="tuikuan" @click="applyRefund()" >立即退款</view>
					
					<view class="dengdaifache" >申请退款中</view>
					
				</view>
				<!-- <view v-if="order.status == 7"  style="background:#bdbdbd;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >申请退款中</view> -->
				<view v-if="order.status == 8"  style="background:#bdbdbd;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >已退款</view>
				
				<!-- <view v-if="order.status == 3||order.status == 4"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >已完成</view> -->
				<view v-if="order.status == 3||order.status == 4" class="row-center">
					
					
					<view class="dengdaifache" >已完成包车</view>
					
				</view>
				<view  v-if="order.status == 9" class="row-center">
					<view  class="fapiao" @click="goInvoiceDetail()" >上传发票</view>
					
					<view class="dengdaifache" >申请开票中</view>
					
				</view>
				
				<view v-if="order.status == 10"  style="background:#ff5500;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " @click="goInvoiceDetail" >已开票(查看详情)</view>
				<!-- SMS_463010382 -->
			</view>
			
		</scroll-view>
		<addInvoicing ref="addInvoicing" @changeInvoiceClose="changeInvoiceClose" :invoice='invoice'></addInvoicing>
		
		<payment :payMode='payMode' :type="3" :pay_close="pay_close" @onChangeFun='onChangeFun' 
			:totalPrice='totalPrice'></payment>
	</view>	
</template>

<script>
	import addInvoicing from '@/components/addInvoicing';
	
	import {
			mapGetters
		} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	
	import { userBaocheDetail,baocheCancel, baocheRefund, frontHandelBaocheConfirm } from "@/api/api.js"
    import { orderBaocheCreate, orderBaochePay, wxPayOrderBaocheResult } from "@/api/order.js"
    import payment from '@/components/payment';
      
	export default {
		computed: mapGetters(['isLogin', 'systemPlatform',]),
		components:{
			payment,addInvoicing
		},
		data() {
			return {
				invoice: {
					invoice: false,
					mer_id: 0
				}, //发票组件
				invoiceData: {}, // 发票数据
				systemType:'',
				latitude: "26.600324",
				longitude: "106.935849",
				scale: 8,
				markers: [],
				polyline: [],
				points:[],
				includePoints: [],
				baoche_id: '',
				order: '',
				order_type: 0,
				pay_close: false,
				totalPrice: "0",
				payType: 'weixin', //支付方式
				payChannel: 'routine',
				//支付方式
				payMode: [
					// #ifdef MP-WEIXIN || APP-PLUS
					{
						"name": "微信支付",
						"icon": "icon-weixin2",
						value: 'weixin',
						title: '微信快捷支付',
						payStatus: 1,
					},
					// #endif
					// #ifdef MP-ALIPAY || APP-PLUS
					{
						"name": "支付宝支付",
						"icon": "icon-zhifubao",
						value: 'alipay',
						title: '支付宝快捷支付',
						payStatus: 1,
					},
					
					 // #endif
					{
						"name": "余额支付",
						"icon": "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						payStatus: 1,
					},
				],
				
			};
		},
		onShow() {
			if(this.isLogin == true){
				uni.showLoading({
					title:'请稍后...'
				})
				this.userBaocheDetail()
			}else{
				toLogin();
			}
			
	
		},
		onLoad(option) {	
			this.baoche_id= option.baoche_id
			
			// 去掉余额
			this.payMode[1].payStatus = 0;
			
			// #ifdef H5
			this.payChannel = this.$wechat.isWeixin() ? 'public' : 'weixinh5';
			// #endif
			// #ifdef MP-WEIXIN
			this.payChannel = 'routine';
			// #endif
			// #ifdef MP-ALIPAY
			this.payChannel = 'routineAlipay';
			this.payType = 'alipay';
			// #endif
			
			// #ifdef APP-PLUS
			this.payChannel = this.systemPlatform === 'ios' ? 'weixinAppIos' : 'weixinAppAndroid';
			// #endif
			var systemInfo =  uni.getSystemInfoSync();
			
			this.systemType =	systemInfo.system && systemInfo.system.indexOf("iOS") > -1 ? "IOS" : systemInfo.system && systemInfo.system.indexOf("Android") > -1 ? "ANDROID" : "OTHER";
			
		},
		onReady() {
		},
		methods:{
			copy: function(val) {
				let that = this;
				uni.setClipboardData({
					data: val,
					success() {
						that.$util.Tips({
							title: '复制成功'
						});
					}
				});
			},
			callUser(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			goInvoiceDetail(){
				if(this.baoche_id && this.totalPrice){
					uni.navigateTo({
						url:"/pages/bus/baoche/invoice_detail_admin?baoche_id="+this.baoche_id
					})
				} else {
					this.$util.Tips({
						title: "参数错误，请返回首页！"
					});
				}
			},
			/**
			 * 开发票
			 */
			goInvoice: function(id) {
				// let that = this;
				// that.invoice.invoice = true;
				// that.invoice.mer_id = id;
				// this.$refs.addInvoicing.getInvoiceDefault();
				// this.$refs.addInvoicing.getInvoiceList();
				if(this.baoche_id && this.totalPrice){
					uni.navigateTo({
						url:"/pages/bus/baoche/invoice?baoche_id="+this.baoche_id+"&price="+this.totalPrice
					})
				} else {
					this.$util.Tips({
						title: "参数错误，请返回首页！"
					});
				}
				
			},
			applyRefund(){
				var that = this
				
				uni.showModal({
				    title: '立即退款',
				    content: '您确定立即退款？',
					cancelText: '取消',
					confirmText: '确认退款',
				    success: function (res) {
						if(res.confirm){
							baocheRefund({baocheId: that.baoche_id}).then(res => {
								uni.hideLoading()
								that.$util.Tips({
									title: "退款成功！"
								});
								that.userBaocheDetail()
							}).catch(err => {
								that.$util.Tips({
									title: err
								});
							})
						}
						
				    
				    }
				});
			},
			
			baocheConfirm(){
				var that = this
				
				
				uni.showModal({
				    title: '确认包车完成',
				    content: '您确定确认包车完成？',
					cancelText: '取消',
					confirmText: '确认',
				    success: function (res) {
						if(res.confirm){
							frontHandelBaocheConfirm({baocheId: that.baoche_id}).then(res => {
								uni.hideLoading()
								that.$util.Tips({
									title: "确认包车完成！"
								});
								that.userBaocheDetail()
							}).catch(err => {
								that.$util.Tips({
									title: err
								});
							})
						}
						
				    
				    }
				});
			},
			

             /**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			
			payCheck(type) {
				
				this.payType = type;
			
				this.SubOrder();
			},
			
			
		
			userBaocheDetail(){
				uni.showLoading({
					title:'请稍后...'
				})
				userBaocheDetail({baocheId: this.baoche_id}).then(res => {
					uni.hideLoading()
					
					var routes = JSON.parse(res.data.routes)
					// this.initMarker(res.data)
					// this.initPolyLine(routes)
					this.order = res.data
					this.order_type = 2
					// this.totalPrice =  res.data.status == 2 ? res.data.wprice : res.data.tprice
					this.totalPrice = res.data.price
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
					return this.$util.Tips({
						title: err
					});
				})
			},
			
			initMarker(baoche){
				var that = this
				
				var originMaker = {
				   id: 1,　	
				   latitude:baoche.originLat,
				   longitude: baoche.originLng,
				   iconPath: '/static/images/bus/start_point.png',
				   width:20,
				   height:20,
				   label: {
						content: baoche.origin,
						color: "#1B1B1B",
						fontSize: 12,
						padding: 1,
						textAlign: "center",
						bgColor: "#ffffff",
						borderRadius:5,
						y: "IOS" === that.systemType ? 10 : 7,
						x: -(baoche.origin.length % 2 == 0 ?baoche.origin.length / 2 * 12 : (baoche.origin.length - 1) / 2 * 12 + Math.floor(6)) - 3
								
					}
				 }
				
			  var destinationMaker = {
					   id: 2,
					   latitude:baoche.destinationLat,
					   longitude: baoche.destinationLng,
					   iconPath: '/static/images/bus/end_point.png',
					   width:20,
					   height:20,
					  
					   label:{
							content: baoche.destination,
							color: "#1B1B1B",
							fontSize: 12,
							padding: 1,
							textAlign: "center",
							bgColor: "#ffffff",
							borderRadius:5,
							y: "IOS" === that.systemType ? 10 : 7,
							x: -(baoche.destination.length % 2 == 0 ? baoche.destination.length / 2 * 12 : (baoche.destination.length - 1) / 2 * 12 + Math.floor(6)) - 3
						}
				}
				var mapCtx = uni.createMapContext("mapGis",this);
				mapCtx.includePoints({
				      padding: [ 70,],
				      points: [
									{
										longitude: baoche.originLng,
										latitude: baoche.originLat
									},
									{
										longitude: baoche.destinationLng,
										latitude: baoche.destinationLat
									}
								]
				    },)
    //             that.$set(that, 'includePoints', [
				// 	{
				// 		longitude: baoche.originLng,
				// 		latitude: baoche.originLat
				// 	},
				// 	{
				// 		longitude: baoche.destinationLng,
				// 		latitude: baoche.destinationLat
				// 	}
				// ]);			
				that.$set(that, 'markers', [originMaker,destinationMaker]);			
				
			},
			
			
			orderCancel(){
				uni.showLoading({
					title:'请稍后...'
				})
				baocheCancel({baocheId: this.baoche_id}).then(res => {
					uni.hideLoading()
					this.$util.Tips({
						title: "取消订单成功！"
					});
					this.userBaocheDetail()
					uni.navigateBack()
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					});
				})
			},
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.map-content {
		width: 100%;
		background-color: #eee;
		// position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		.map-gis {
			width: 100%;
			height: 100%;
		}
	}
   .list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.type-desc{
		background-color: #007aff;
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}

  .ex-main{
		position: relative;
		margin: 60rpx 24rpx 0 24rpx;
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
	}
	.ex-color{
		color: #a7a7a7;
		font-size: 13px;
		margin-bottom: 13px;
	}
	.tuikuan{
		background: #9b9b9b;
		color: #fff;
		padding: 8px;
		font-size: 12px;
		z-index: 9;
		text-align: center;
		border-radius: 30px;
		width: 20%;
	}
	
	.fapiao{
		background: #ff5500;
		color: #fff;
		padding: 8px;
		font-size: 12px;
		z-index: 9;
		text-align: center;
		border-radius: 30px;
		width: 20%;
	}
	.dengdaifache{
		background: #007AFF;
		color: #fff;
		padding: 13px;
		font-size: 15px;
		z-index: 9;
		text-align: center;
		border-radius: 25px;
		width: 70%;
		margin-left: 15px;
	}
	.copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 20rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;
	}
</style>